import React, {Component, lazy, Suspense} from 'react'
import {BrowserRouter as Router, Link} from 'react-router-dom'
import CacheRoute, { CacheSwitch } from 'react-router-cache-route'

const Home = lazy(()=>import('./components/Home'))
const User = lazy(()=>import('./components/User'))

class App extends Component {
  render() {
    return (
      <Suspense fallback={<div>loading...</div>}>
        <Router>
          <Link to='/'>主页</Link>
          <Link to='/user'>用户</Link>
          <CacheSwitch>
            <CacheRoute exact path='/' render={(props)=><Home {...props}></Home>}></CacheRoute>
            <CacheRoute exact path='/user' render={(props)=><User {...props}></User>}></CacheRoute>
          </CacheSwitch>
        </Router>
      </Suspense>
    )
  }
}

export default App